<template>
  <div class="page-question-test-paper">
    <div class="pageposition">
      <h1 class="paper-name" v-if="['1', '2', '3'].includes(type)">
        {{ paperDetail.name }}
      </h1>
      <!-- 头部开始 -->
      <div class="head">
        <div class="head-left">
          <span class="head-l-t">{{
            ["1", "2", "3"].includes(type) ? "考试中" : "练习中"
          }}</span>
          <span class="head-tips" v-if="['1', '2', '3'].includes(type)"
            >*请认真完成本次考试，中途退出考试会影响打分！</span
          >
        </div>
        <div class="head-right">
          <Button
            type="primary"
            @click="submitQuestionTest"
            v-if="
              ['1', '2', '3'].includes(type) &&
                questionList.length > 0 &&
                !review &&
                num_active == questionList.length - 1
            "
            >提交试卷</Button
          >
          <!-- <Button type="primary" @click="handleSubmit">提交试卷</Button> -->
          <Button
            type="error"
            style="margin-left:20px;"
            v-if="['1', '2', '3'].includes(type) && !review"
            @click="handleClickLeft"
          >
            <span>退出考试</span>
          </Button>
          <Button
            type="error"
            style="margin-left:20px;"
            v-else-if="!['1', '2', '3'].includes(type) && !review"
            @click="$router.back()"
          >
            <span>退出练习</span>
          </Button>
          <Button
            type="error"
            style="margin-left:20px;"
            v-else
            @click="$router.back()"
          >
            <span>退出</span>
          </Button>
        </div>
      </div>
      <!-- 中间容器 -->
      <div class="question_container">
        <div class="question_left">
          <div
            class="count_down"
            v-if="
              ['2', '3'].includes(type) &&
                questionList &&
                questionList.length > 0 &&
                !review &&
                paperDetail.span > 0
            "
          >
            <img src="/img/pc/clock.png" alt="" />
            <no-ssr>
              <van-count-down
                :time="paperDetail.span"
                @finish="finish"
                format="HH:mm:ss"
                style="font-size: 30px;font-weight: bold;color: #43474d;"
              >
              </van-count-down>
            </no-ssr>
          </div>
          <div
            class="answer_card"
            v-if="questionList && questionList.length > 0"
          >
            <h1 class="answer_card_title">答题卡</h1>
            <template v-if="['0', '4'].includes(type) || review">
              <div class="answer_box">
                <ul class="answer_cantent">
                  <li
                    :class="[
                      'number_box',
                      item.is_answer ? 'done' : '',
                      item &&
                      item.doneQuestionType &&
                      ['w', 'u', 'hc'].includes(item.doneQuestionType)
                        ? 'wrong'
                        : '',
                      num_active == index ? 'active' : ''
                    ]"
                    v-for="(item, index) in questionList"
                    :key="'number-box' + index"
                    @click="nextQuestionBtn('manual', index)"
                  >
                    {{ index + 1 }}
                  </li>
                </ul>
              </div>
            </template>
            <template v-if="['1', '2', '3'].includes(type)">
              <div
                class="answer_box"
                v-for="(item, index) in paperDetail.questions"
                :key="item.id"
              >
                <div class="answer_name">
                  {{ (item && item.name) || "第" + (index + 1) + "部分" }}
                </div>
                <ul class="answer_cantent">
                  <li
                    :class="[
                      'number_box',
                      questionItem && questionItem.is_answer ? 'done' : '',
                      num_active == questionItem._index_ - 1 ? 'active' : '',
                      review &&
                      questionItem &&
                      questionItem.doneQuestionType &&
                      ['w', 'u', 'hc'].includes(questionItem.doneQuestionType)
                        ? 'wrong'
                        : ''
                    ]"
                    v-for="(questionItem,
                    questionIndex) in item.questionGroupTestQuestionList"
                    :key="questionItem.id"
                    @click="nextQuestionBtn('manual', questionItem._index_ - 1)"
                  >
                    {{ questionIndex + 1 }}
                  </li>
                </ul>
              </div>
            </template>
          </div>
        </div>
        <div class="question_right">
          <div class="btn_list">
            <Button
              type="primary"
              @click="nextQuestionBtn('pre')"
              v-if="questionList.length > 0"
              >上一题</Button
            >
            <Button
              style="margin-left:20px;"
              type="primary"
              @click="nextQuestionBtn('next')"
              v-if="questionList.length > 0"
              >下一题</Button
            >
          </div>
          <div
            class="collection"
            @click="collectionHandle"
            v-if="['0'].includes(type)"
          >
            <img
              src="/img/mobile/answer_collection.png"
              alt=""
              :style="{
                backgroundColor:
                  current_item.isCollect === 1
                    ? 'var(--theme-color)'
                    : '#c8c9cc'
              }"
            />
          </div>
          <div class="rotate-box" id="rotate-box">
            <!-- 单选题 -->
            <single-choice
              v-if="
                current_item &&
                  current_item.type == 1 &&
                  questionList[num_active]
              "
              v-model="questionList[num_active].user_answer"
              :detail="current_item"
              :type="type"
              @handleExplain="handleExplain"
              @change="handleQuestionChange"
            ></single-choice>
            <!-- 多选题 -->
            <multiple-choice
              v-if="
                current_item &&
                  current_item.type == 2 &&
                  questionList[num_active]
              "
              v-model="questionList[num_active].user_answer"
              :detail="current_item"
              :type="type"
              @handleExplain="handleExplain"
              @change="handleQuestionChange"
            ></multiple-choice>
            <!-- 简答题 -->
            <short-answer
              v-if="
                current_item &&
                  current_item.type == 3 &&
                  questionList[num_active]
              "
              v-model="questionList[num_active].user_answer"
              :detail="current_item"
              :type="type"
              @handleExplain="handleExplain"
              @change="handleQuestionChange"
            ></short-answer>
            <!-- 填空题 -->
            <cloze
              v-if="
                current_item &&
                  current_item.type == 4 &&
                  questionList[num_active]
              "
              v-model="questionList[num_active].user_answer"
              :detail="current_item"
              :type="type"
              @handleExplain="handleExplain"
              @change="handleQuestionChange"
            ></cloze>
            <!-- 判断题 -->
            <judgment
              v-if="
                current_item &&
                  current_item.type == 5 &&
                  questionList[num_active]
              "
              v-model="questionList[num_active].user_answer"
              :detail="current_item"
              :type="type"
              @handleExplain="handleExplain"
              @change="handleQuestionChange"
            ></judgment>
          </div>
          <div class="analysis-container" v-if="current_item.is_show_explain">
            <div class="analysis-head-info">
              <div class="head-left" v-if="!['1', '2', '3'].includes(type)">
                <div class="error-number">
                  {{ current_item.wrongCount || 0 }}
                </div>
                <div class="error-text">错误次数</div>
              </div>
              <div class="head-right">
                <div class="difficulty-number">
                  <Rate disabled allow-half v-model="current_item.difficulty" />
                </div>
                <div class="difficulty-text">难度</div>
              </div>
            </div>
            <div class="analysis-content-info">
              <div class="analysis-video" v-if="current_item.videoUrl">
                <div class="video-name">解析视频</div>
                <video
                  width="100%"
                  style="padding:0 30px;"
                  :src="current_item.videoUrl"
                  controls="controls"
                >
                  您的浏览器不支持 video 标签。
                </video>
              </div>
              <div class="analysis-question">
                <div class="analysis-text">
                  <span style="color: var(--theme-color);">题目解析：</span>
                  <span
                    v-if="current_item.parsing"
                    v-html="current_item.parsing"
                  ></span>
                  <span v-else>该试题暂无解析！</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="is_half_out" class="logout-modal">
      <div class="logout">
        <div class="logout-title-modal">好不容易坚持到这里～</div>
        <div class="logout-tips">中途退出会影响评分哦，确定退出吗？</div>
        <div class="logout-btn">
          <i-button @click="savePaper">确定</i-button>
          <i-button @click="is_half_out = false">取消</i-button>
        </div>
      </div>
    </div>
    <!-- <div class="paper_msg_box" v-if="paperMsgBox">
      <div class="paper_dialog">
        <p class="paper_name">{{ taskPaper.paperName }}</p>
        <div class="paper_remind">
          <div class="remind_left">注意事项：</div>
          <div class="remind_right">
            {{ taskPaper.remind }}
          </div>
        </div>
        <div class="paper_time">
          <div class="remind_left">考试时间：</div>
          <div class="remind_right">{{ taskPaper.testTime }}分钟</div>
        </div>
        <div class="paper_btn_start">
          <Button type="primary" @click="startTest">点击开始</Button>
        </div>
      </div>
    </div> -->
    <div v-if="is_time_out" class="submit-modal">
      <div class="submit">
        <div class="submit-img">
          <img src="/img/pc/test-submit.png" alt="" />
        </div>
        <div class="submit-title-modal">考试已结束，请停止作答！</div>
        <div class="submit-title-modal">试卷提交中！</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import RichText from "~/components/pc/RichText.vue";
import {
  getQuestionBankPaperDetail,
  saveCollection,
  deleteCollection,
  saveLastDone,
  updateLastDone,
  getLastDone,
  saveQuestionBankWrong,
  getQuestionBankChapterQuestions,
  saveChapterPractice,
  getRandomWrongQuestion,
  getQuestionBankOne,
  getQuestionBankPaperOne,
  savePaper,
  getTestReview,
  chapterContinueTest,
  getLastDoneList,
  getQuestionBankWrong,
  saveWrongPractice
} from "~/api/v2-question-bank/question-bank.js";
import SingleChoice from "~/components/pc/question/SingleChoice.vue";
import MultipleChoice from "~/components/pc/question/MultipleChoice.vue";
import ShortAnswer from "~/components/pc/question/ShortAnswer.vue";
import Cloze from "~/components/pc/question/Cloze.vue";
import Judgment from "~/components/pc/question/Judgment.vue";
const originState = {
  num_active: 0, //当前数组下标
  showAnswerSheet: false, //是否打开答题卡
  showAdvanceSubmit: false, //是否提前交卷
  /* 试卷内容 */
  paperDetail: {
    span: -1,
    questions: [],
    name: ""
  },
  /* 试题 */
  questionList: [],
  /* 章节详情 */
  chapterDetail: {},
  /* 上次做到哪里 */
  lastDone: {
    chapterId: 0,
    id: 0,
    lastIndex: 0,
    userId: 0
  },
  /* 考试时间结束弹窗 */
  is_time_out: false,
  /* 中途退出弹窗 */
  is_half_out: false,
  /* 题库信息 */
  questionBank: {
    questionGroupName: ""
  },
  /* 考试回顾 */
  testRecord: {},
  /* 考试计时 */
  useTime: 0,
  /* 考试计时器 */
  count_timer: null
};
export default {
  name: "page-question-test-paper",
  components: {
    RichText,
    SingleChoice,
    MultipleChoice,
    ShortAnswer,
    Cloze,
    Judgment
  },
  data() {
    return {
      ...originState
      //   question_type_arr: [
      //     { id: 1, name: this.$t("locale.pc.mytest.testReview.t23") },
      //     { id: 2, name: this.$t("locale.pc.mytest.testReview.t24") },
      //     { id: 3, name: this.$t("locale.pc.mytest.testReview.t25") },
      //     { id: 4, name: this.$t("locale.pc.mytest.testReview.t26") },
      //     { id: 5, name: this.$t("locale.pc.mytest.testReview.t27") }
      //   ], //题型
      //   paperMsgBox: true,
      //   taskPaper: {},
      //   is_done_test: false,
      //   seconds: 0,
      //   questionList:[],
      //   num_active:0,
      //   is_show_logout:false,
      //   is_show_submit:false,
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      web_info(state) {
        return state.web_info;
      },
      major_list(state) {
        return state.major_list;
      },
      token(state) {
        return state.token;
      },
      kl_md(state) {
        return state.kl_md;
      }
    }),
    /* 页面头部标题 */
    title() {
      console.log("this.type:", this.type);
      switch (this.type) {
        case "0":
          return this.chapterDetail.chapterName;
        case "1":
          return "专项训练 - " + this.paperDetail.name;
        case "2":
          if (this.review) {
            return "考试回顾 - " + this.paperDetail.name;
          } else {
            return "模拟考试 - " + this.paperDetail.name;
          }
        // return "模拟考试 - " + this.paperDetail.name;
        case "3":
          return "真题训练 - " + this.paperDetail.name;
        case "4":
          if (this.review) {
            return "错题回顾 - " + this.questionBank.questionGroupName;
          } else {
            return "错题随练 - " + this.questionBank.questionGroupName;
          }
        default:
          return "未知";
      }
    },
    /* 空试题文本提示 */
    null_title() {
      switch (this.type) {
        case "0":
          return "当前章节暂无试题哦~";
        case "1":
          return "当前专项训练暂无试题哦~";
        case "2":
          return "当前模拟考试暂无试题哦~";
        case "3":
          return "当前真题训练暂无试题哦~";
        case "4":
          return "当前错题随练暂无试题哦~";
        default:
          return "暂无试题哦~";
      }
    },
    /* 目标试题 */
    targetId() {
      return this.$route.query.targetId;
    },
    /* 题套Id */
    questionId() {
      return this.$route.query.id;
    },
    /* 试卷Id */
    testId() {
      return this.$route.query.testId;
    },
    /* 类型（0章节练习 试卷类型 1专项训练 2模拟考试 3真题训练） 4错题随练*/
    type() {
      return String(this.$route.query.type);
    },
    /* 是否是题目回顾 */
    review() {
      const { review } = this.$route.query;
      return review ? Number(review) : 0;
    },
    /* 章节Id */
    chapterId() {
      return this.$route.query.chapterId;
    },
    /* 当前正在做的题 */
    current_item() {
      if (
        this.questionList.length == 0 ||
        this.num_active > this.questionList.length - 1
      ) {
        return {
          answer: "0",
          chapter: 0,
          difficulty: 1,
          fatherChapterId: "",
          id: 0,
          parsing: "",
          question: "",
          type: 1,
          videoUrl: "",
          user_answer: "",
          /* 是否显示试题解析 */
          is_show_explain: false,
          /* 是否显示正确答案 */
          is_show_answer: false
        };
      } else {
        return this.questionList[this.num_active];
      }
    },
    /* 未完成的题目的数量 */
    unAnswerNum() {
      return this.questionList.filter(item => item && !item.is_answer).length;
    },
    /* 考试记录Id */
    testRecordId() {
      return this.$route.query.testRecord;
    },
    /* 是否是手动改卷 */
    is_manual_correct() {
      if(this.paperDetail && this.paperDetail.scoreShow == 1){
        return true;
      }else{
        return false;
      }
      // if (this.kl_md.KLSTFWB == 1 && this.web_info.RICHTEXT_SWITCH == 1) {
      //   if (
      //     this.questionList.filter(
      //       item =>
      //         [3, 4].includes(Number(item.type)) && item.richTextSwitch == 1
      //     ).length > 0
      //   ) {
      //     return true;
      //   } else {
      //     return false;
      //   }
      // } else {
      //   return false;
      // }
    }
  },
  destroyed() {
    if (["2", "3"].includes(this.type)) {
      this.destroyRemotion();
    }
  },
  deactivated() {
    if (["2", "3"].includes(this.type)) {
      this.destroyRemotion();
    }
  },
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    formatDate(timestamp) {
      let date = new Date(timestamp);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      let add0 = m => {
        return m < 10 ? "0" + m : m;
      };
      let showTime = null;
      if (new Date(timestamp).toDateString() === new Date().toDateString()) {
        if (hour < 10) {
          showTime = "上午";
        } else if (hour < 12) {
          showTime = "中午";
        } else if (hour < 18) {
          showTime = "下午";
        } else {
          showTime = "晚上";
        }
        // console.log("今天", showTime + " " + add0(hour) + ":" + add0(minute));
        return showTime + " " + add0(hour) + ":" + add0(minute);
      } else {
        // console.log("以前", add0(year) + "/" + add0(month) + "/" + add0(day));
        return add0(year) + "/" + add0(month) + "/" + add0(day);
      }
    },
    /* 倒计时结束 */
    finish() {
      this.is_time_out = true;
      this.savePaper();
    },
    /* 提交答卷弹窗 */
    submitQuestionTest() {
      /* 未做完全部的题目 */
      if (this.unAnswerNum > 0) {
        this.$Modal.confirm({
          title: "提示",
          content: "您尚有题未完成，确定要提交试卷吗？",
          onOk: () => {
            this.savePaper();
          },
          onCancel: () => {}
        });
      } else {
        this.$Modal.confirm({
          title: "提示",
          content: "您确定要提交试卷吗？",
          onOk: () => {
            this.savePaper();
          },
          onCancel: () => {}
        });
      }
    },
    /* 交卷 */
    async savePaper() {
      if (!this.is_time_out) {
        this.SET_IS_LOADING(true);
      }
      if (this.count_timer) {
        clearInterval(this.count_timer);
      }
      let questionListTrim = this.questionList.map((item, index) => {
        return {
          nodeId: item.nodeId,
          questionType: item.type,
          testQuestionId: item.id,
          chosenAnswer: item.user_answer,
          score: item.score
        };
      });
      console.log("questionListTrim:", questionListTrim);
      let params = {
        paperId: this.testId,
        userId: this.user_info.id,
        questionGroupId: this.questionId,
        useTime: Math.ceil(this.useTime / 60),
        items: JSON.stringify(questionListTrim)
      };
      let result = await savePaper(params);
      console.log("提交考试：", result);
      if (result && result.data && result.data.code == 200) {
        this.destroyRemotion();
        const { data } = result.data;
        if (this.is_half_out) {
          console.log("router:", window.history);
          this.$router.back();
          this.$router.back();
          this.$router.back();
        } else {
          this.$router.replace({
            path: "/fraction-count",
            query: {
              id: this.questionId,
              type: "fraction",
              testRecordId: JSON.stringify(data.id),
              testType: this.type,
              testId: this.testId,
              is_manual_correct: this.is_manual_correct ? 1 : 0,
              is_just_test: 1
            }
          });
        }
      }
      this.is_half_out = false;
      this.is_time_out = false;
      this.SET_IS_LOADING(false);
    },
    async saveWrong() {
      let params = {
        json: JSON.stringify({
          userId: this.user_info.id,
          questionGroupId: this.questionId,
          questionId: this.current_item.questionId,
          userAnswer: this.current_item.user_answer,
          questionType: this.current_item.type
        })
      };
      let result = await saveWrongPractice(params);
      console.log("错题随练保存:", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        if (data) {
          console.log(data);
          this.questionList = this.questionList.map((item, index) => {
            if (item.id == this.current_item.id) {
              let new_item = {
                ...item,
                ...data,
                type: item.type,
                is_show_answer: true,
                is_show_explain: data.doneQuestionType != "c" ? true : false,
                is_answer: true,
                is_ban_input: true
              };
              console.log("new_item:", new_item);
              return new_item;
            } else {
              return item;
            }
          });
        }
      }
    },
    /* 切换题目 */
    async nextQuestionBtn(type, index) {
      /* 保存章节 */
      if (
        ["pre", "next"].includes(type) &&
        ["0"].includes(this.type) &&
        !this.current_item.is_ban_input
      ) {
        await this.saveChapterPractice();
        // if (this.current_item.doneQuestionType == "w") {
        //   return false;
        // }
        if (["w", "u", "hc"].includes(this.current_item.doneQuestionType)) {
          return false;
        }
      }
      //错题随练
      if (
        ["pre", "next"].includes(type) &&
        ["4"].includes(this.type) &&
        !this.current_item.is_ban_input
      ) {
        await this.saveWrong();
        if (["w", "u", "hc"].includes(this.current_item.doneQuestionType)) {
          return false;
        }
      }
      /* 跳转到指定页 */
      if (type == "manual") {
        if (this.num_active > index) {
          document.getElementById("rotate-box").classList.add("fadeInLeft");
          setTimeout(() => {
            document
              .getElementById("rotate-box")
              .classList.remove("fadeInLeft");
          }, 500);
        } else {
          document.getElementById("rotate-box").classList.add("fadeInRight");
          setTimeout(() => {
            document
              .getElementById("rotate-box")
              .classList.remove("fadeInRight");
          }, 500);
        }
        this.num_active = index;
        this.showAnswerSheet = false;
        /* 上一页 */
      } else if (type == "pre") {
        if (this.num_active == 0) {
          return;
        }
        this.num_active--;
        // if (this.num_active == 0) {
        //   this.$toast("没有上一条了哦~");
        // }
        if (this.num_active < 0) {
          this.num_active = this.questionList.length - 1;
        }
        document.getElementById("rotate-box").classList.add("fadeInLeft");
        setTimeout(() => {
          document.getElementById("rotate-box").classList.remove("fadeInLeft");
        }, 500);
        /* 下一页 */
      } else if (type == "next") {
        if (this.num_active == this.questionList.length - 1) {
          if (["0"].includes(this.type)) {
            this.$Modal.confirm({
              title: "提示",
              content: "当前练习已经全部完成，是否重新练习？",
              onOk: async () => {
                await this.getQuestionsByChapter();
                this.num_active = 0;
                this.questionList = this.chapterDetail.children.map(item => {
                  let trim_item = this.initAnswer(item);
                  let new_item = {
                    ...item,
                    ...trim_item,
                    /* 是否显示试题解析 */
                    is_show_explain: false,
                    /* 是否显示正确答案 */
                    is_show_answer: false,
                    /* 是否允许输入 */
                    is_ban_input: false,
                    /* 是否已经答题 */
                    is_answer: false
                  };
                  return new_item;
                });
              },
              onCancel: () => {}
            });
          }
          if (["4"].includes(this.type) && !this.review) {
            this.$Modal.confirm({
              title: "提示",
              content: "当前练习已经全部完成，是否重新练习？",
              onOk: async () => {
                await this.getRandomWrongQuestion();
                this.num_active = 0;
              },
              onCancel: () => {}
            });
          } else if (["4"].includes(this.type) && this.review == 1) {
            this.$Modal.confirm({
              title: "提示",
              content: "当前回顾已经是最后一题，是否重新回顾？",
              onOk: async () => {
                this.num_active = 0;
              },
              onCancel: () => {}
            });
          }
          return;
        }
        this.num_active++;
        // if (this.num_active == this.questionList.length - 1) {
        //   this.$toast("没有下一条了哦~");
        // }
        if (this.num_active > this.questionList.length - 1) {
          this.num_active = 0;
        }
        document.getElementById("rotate-box").classList.add("fadeInRight");
        setTimeout(() => {
          document.getElementById("rotate-box").classList.remove("fadeInRight");
        }, 500);
      }
    },
    /* 试题解析事件 */
    handleExplain(id) {
      this.questionList = this.questionList.map((item, index) => {
        if (item.id == id) {
          return {
            ...item,
            is_show_explain: true
          };
        } else {
          return item;
        }
      });
      if (["0"].includes(this.type) && !this.current_item.is_ban_input) {
        this.saveChapterPractice();
      }
      if (["4"].includes(this.type) && !this.current_item.is_ban_input) {
        this.saveWrong();
      }
    },
    /* 试题收藏事件 */
    async collectionHandle() {
      /*收藏 */
      if (this.current_item.isCollect == 0) {
        let params = {
          type: 3,
          userId: this.user_info.id,
          targetId: this.current_item.id
        };
        let result = await saveCollection(params);
        if (result && result.data && result.data.code == 200) {
          this.questionList = this.questionList.map((i, x) => {
            if (i.id == this.current_item.id) {
              return {
                ...i,
                isCollect: 1
              };
            } else {
              return i;
            }
          });
          this.$Message.success("收藏成功");
        }
        /* 取消收藏 */
      } else if (this.current_item.isCollect == 1) {
        let result = await deleteCollection(
          this.current_item.id + "/" + this.user_info.id
        );
        if (result && result.data && result.data.code == 200) {
          this.questionList = this.questionList.map((i, x) => {
            if (i.id == this.current_item.id) {
              return {
                ...i,
                isCollect: 0
              };
            } else {
              return i;
            }
          });
          this.$Message.info("取消收藏");
        }
      }
    },
    /* 获取试卷试题 */
    async getTestPaperDetail() {
      let params = {
        questionGroupPaperId: this.testId,
        questionGroupId: this.questionId,
        questionType: this.type
      };
      let result = await getQuestionBankPaperDetail(params);
      console.log("获取试卷试题：", result);
      if (result && result.data && result.data.code == 200) {
        let originData = result.data.data;
        if (originData) {
          let data_trim = [];
          let arr_index = 0;
          originData = originData.map((item, index) => {
            if (item.questionGroupTestQuestionList) {
              /* 追加_index_属性以替代数组下标索引*/
              let score = JSON.parse(item.questionParameter)[0].score;
              let questionGroupTestQuestionList = item.questionGroupTestQuestionList.map(
                i => {
                  arr_index = arr_index + 1;
                  return {
                    ...i,
                    /* 数组下标索引 */
                    _index_: arr_index,
                    /* 是否已经答题 */
                    is_answer: false,
                    /* 追加nodeId */
                    nodeId: item.id,
                    /* 题目分数 */
                    score
                  };
                }
              );
              /* 将各个部分的题目追加到data_trim */
              data_trim = [...data_trim, ...questionGroupTestQuestionList];
              return {
                ...item,
                questionGroupTestQuestionList
              };
            }
          });
          this.paperDetail = {
            ...this.paperDetail,
            questions: originData
          };
          /* 初始化题目 */
          this.questionList = data_trim.map(item => {
            let trim_item = this.initAnswer(item);
            return {
              ...item,
              ...trim_item,
              /* 是否显示试题解析 */
              is_show_explain: false,
              /* 是否显示正确答案 */
              is_show_answer: false,
              /* 是否允许输入 */
              is_ban_input: false
            };
          });
        }
        /* 禁止浏览器翻页退出操作 考试计时 */
        if (["2", "3"].includes(this.type) && !this.review) {
          this.removeReflesh();
          if (this.count_timer) {
            clearInterval(this.count_timer);
          }
          this.count_timer = setInterval(this.countTime, 1000);
        }
        /* 考试回顾获取考试记录 */
        // if (this.review) {
        //   this.getTestReview();
        // }
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
      }
    },
    /* 考试计时 */
    countTime() {
      this.useTime++;
    },
    /* 获取试卷详情 */
    async getQuestionBankPaperOne() {
      this.SET_IS_LOADING(true);
      let result = await getQuestionBankPaperOne(this.testId);
      console.log("获取试卷详情：", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        if (data) {
          this.paperDetail = {
            ...this.paperDetail,
            ...data,
            span: Number(data.span) * 60 * 1000
          };
          const { answerCount, testNum } = this.paperDetail;
          if (answerCount == 1) {
            if (testNum >= answerCount) {
              this.$dialog
                .alert({
                  title: "提示",
                  confirmButtonText: "确认",
                  message: `已达到考试上限次数！`
                })
                .then(() => {
                  this.$router.back();
                });
              return;
            }
          }
          if (!this.review) {
            this.getTestPaperDetail();
          }
        } else {
          this.$dialog
            .alert({
              title: "提示",
              confirmButtonText: "确认",
              message: `没有找到试卷，返回上页`
            })
            .then(() => {
              this.$router.back();
            });
        }
      } else {
        this.$dialog
          .alert({
            title: "提示",
            confirmButtonText: "确认",
            message: `没有找到试卷，返回上页`
          })
          .then(() => {
            this.$router.back();
          });
      }
      this.SET_IS_LOADING(false);
    },
    /* 上次做到事件 */
    async lastDoneWhere({ type }) {
      /* 直接去到目标试题 */
      if (this.targetId) {
        let lastIndex = this.questionList.findIndex(
          item => item.id == Number(this.targetId)
        );
        if (lastIndex != -1) {
          console.log("目标试题下标", lastIndex);
          this.num_active = lastIndex;
          return;
        } else {
          console.log("找不到目标试题下标");
        }
      }
      /* 获取上次做到 */
      if (type == "get") {
        let params = {
          chapterId: this.chapterId,
          userId: this.user_info.id
        };
        let result = await getLastDoneList(params);
        console.log("获取上次做到：", result);
        if (result && result.data && result.data.code == 200) {
          const { rows } = result.data.data;
          if (rows && rows.length > 0) {
            this.lastDone = rows[0];
            if (this.lastDone.lastIndex) {
              this.num_active = this.lastDone.lastIndex;
            }
          }
        }
        /* 修改当前章节上次做到 */
      } else if (type == "update") {
        let params = {
          chapterId: this.chapterId,
          userId: this.user_info.id,
          lastIndex: this.num_active
        };
        let result = await updateLastDone(params);
        console.log("修改上次做到：", result);
        if (result && result.data && result.data.code == 200) {
          this.lastDone = result.data.data;
        }
        /* 新增当前章节上次做到 */
      } else if (type == "save") {
        let params = {
          chapterId: this.chapterId,
          userId: this.user_info.id,
          lastIndex: this.num_active
        };
        let result = await saveLastDone(params);
        console.log("新增上次做到：", result);
        if (result && result.data && result.data.code == 200) {
          this.lastDone = result.data.data;
        }
      }
    },
    /**
     * 初始化答题
     * detail - 试题详情
     */
    initAnswer(detail) {
      const { type, answer, question } = detail;
      let user_answer = "";
      let origin_answer = [];
      let origin_answer_trim = [];
      let question_copy = "";

      try {
        question_copy = JSON.parse(question);
      } catch (err) {
        console.warn(err);
      }
      switch (type) {
        case 1:
          origin_answer_trim = Number(answer);
          user_answer = "";
          break;
        case 2:
          try {
            origin_answer = JSON.parse(answer);
          } catch (err) {
            console.warn(err);
          }
          origin_answer_trim = origin_answer;
          user_answer = [];
          break;
        case 3:
          origin_answer_trim = answer;
          user_answer = "";
          break;
        case 4:
          try {
            origin_answer = JSON.parse(answer);
          } catch (err) {
            console.warn(err);
          }
          if (["1", "2", "3"].includes(this.type) && !this.review) {
            if (question_copy && question_copy.answer) {
              user_answer = question_copy.answer.map(i => "");
            }
            break;
          }
          origin_answer_trim = origin_answer;
          user_answer = origin_answer.map(i => "");
          break;
        case 5:
          origin_answer_trim = Number(answer);
          user_answer = "";
          break;
        default:
          user_answer = "";
          break;
      }
      return {
        ...detail,
        answer: origin_answer_trim,
        question: question_copy,
        user_answer
      };
    },
    /**
     * 初始化答案
     * type - 题型
     * orginAnswer - 未格式化的答案
     */
    initAnswerItem(type, orginAnswer) {
      let user_answer = "";
      switch (type) {
        case 1:
          user_answer = Number(orginAnswer);
          break;
        case 2:
          try {
            user_answer = JSON.parse(orginAnswer);
          } catch (err) {
            console.warn(err);
          }
          break;
        case 3:
          user_answer = orginAnswer;
          break;
        case 4:
          try {
            user_answer = JSON.parse(orginAnswer);
          } catch (err) {
            console.warn(err);
          }
          break;
        case 5:
          user_answer = Number(orginAnswer);
          break;
        default:
          user_answer = orginAnswer;
          break;
      }
      return user_answer;
    },
    /* 获取章节下的题目 */
    async getQuestionsByChapter() {
      this.SET_IS_LOADING(true);

      let params = this.chapterId + "&userId=" + this.user_info.id;
      let result = await getQuestionBankChapterQuestions(params);
      console.log("获取章节下的题目：", result);
      if (result && result.data && result.data.code == 200) {
        this.chapterDetail = result.data.data;
        const { children } = result.data.data;
      }
      this.$nextTick(() => {
        this.SET_IS_LOADING(false);
      });
    },
    /* 章节练习保存 */
    async saveChapterPractice() {
      let params = {
        lastIndex: this.num_active,
        json: JSON.stringify([
          {
            userId: this.user_info.id,
            questionGroupId: this.questionId,
            chapterId: this.chapterId,
            questionId: this.current_item.id,
            userAnswer: this.current_item.user_answer,
            questionType: this.current_item.type
          }
        ])
      };
      let result = await saveChapterPractice(params);
      console.log("章节练习保存:", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;

        if (data) {
          delete data.id;
          this.questionList = this.questionList.map((item, index) => {
            if (item.id == this.current_item.id) {
              let new_item = {
                ...item,
                ...data,
                type: item.type,
                is_show_answer: true,
                is_show_explain: true,
                is_answer: true,
                is_ban_input: true
              };
              console.log("new_item:", new_item);
              return new_item;
            } else {
              return item;
            }
          });
        }
      }
    },
    /* 章节练习继续做题 */
    async chapterContinueTest() {
      let params = {
        chapterId: this.chapterId,
        userId: this.user_info.id
      };
      let result = await chapterContinueTest(params);

      console.log("章节练习继续做题：", result);
      if (result && result.data && result.data.code == 200) {
        let children = result.data.data;
        if (children) {
          this.questionList = children.map(item => {
            // console.log("item",item);
            let trim_item = this.initAnswer(item);
            // console.log("trim_item",trim_item);
            let trim_user_answer = "";
            let new_item = {
              ...item,
              ...trim_item,
              /* 是否显示试题解析 */
              is_show_explain: false,
              /* 是否显示正确答案 */
              is_show_answer: false,
              /* 是否允许输入 */
              is_ban_input: false,
              /* 是否已经答题 */
              is_answer: false
            };
            // console.log("new_item",new_item);
            if (item.userAnswer) {
              trim_user_answer = this.initAnswerItem(
                item.type,
                item.userAnswer
              );
              new_item = {
                ...new_item,
                user_answer: trim_user_answer,
                is_show_answer: true,
                is_show_explain: true,
                is_answer: true,
                is_ban_input: true
              };
            }
            return new_item;
          });
          this.lastDoneWhere({ type: "get" });
        }
      }
    },
    /* 章节练习确认 */
    handleCheck() {
      if (this.current_item.is_ban_input) {
        return false;
      }
      this.questionList = this.questionList.map((item, index) => {
        if (item.id == this.current_item.id) {
          return {
            ...item,
            is_show_answer: true,
            is_show_explain: true,
            is_answer: true,
            is_ban_input: true
          };
        } else {
          return item;
        }
      });
      this.saveChapterPractice();
    },
    /* 错题随练 */
    async getRandomWrongQuestion() {
      this.SET_IS_LOADING(true);
      let params = {
        questionGroupId: this.questionId,
        userId: this.user_info.id
      };
      let result = await getRandomWrongQuestion(params);
      console.log("获取错题随练：", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        if (data && data.length > 0) {
          this.questionList = data.map(item => {
            let trim_item = this.initAnswer({
              ...item,
              type: item.questionType
            });
            return {
              ...item,
              ...trim_item,
              /* 是否显示试题解析 */
              is_show_explain: false,
              /* 是否显示正确答案 */
              is_show_answer: false,
              /* 是否允许输入 */
              is_ban_input: false,
              /* 是否已经答题 */
              is_answer: false
            };
          });
        }
      }
      this.SET_IS_LOADING(false);
    },
    /* 错题回顾 */
    async getQuestionBankWrong() {
      this.SET_IS_LOADING(true);
      let params = {
        userId: this.user_info.id,
        questionGroupId: this.questionId
      };
      let result = await getQuestionBankWrong(params);
      console.log("获取错题回顾：", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        if (data) {
          this.questionList = data.map((item, index) => {
            let trim_item = this.initAnswer({
              ...item,
              type: item.questionType
            });
            let trim_user_answer = this.initAnswerItem(
              item.type,
              item.userAnswer
            );
            let new_item = {
              ...item,
              ...trim_item,
              user_answer: trim_user_answer,
              is_show_answer: true,
              is_show_explain: true,
              is_answer: true,
              is_ban_input: true
            };
            return new_item;
          });
        }
      }
      this.SET_IS_LOADING(false);
    },
    /* 获取当前题库 */
    async getQuestionBankOne() {
      this.SET_IS_LOADING(true);
      let result = await getQuestionBankOne(this.questionId);
      console.log("获取当前题库：", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        if (data) {
          this.questionBank = data;
        }
      }
      this.SET_IS_LOADING(false);
    },
    /* 答题change事件 */
    handleQuestionChange(v) {
      console.log("传递过来的答案", v);
      let __TYPE__ = Object.prototype.toString.call(v);
      if (__TYPE__ === "[object Array]") {
        let null_result_length = v.filter(i => !String(i)).length;
        console.log("null_result_length:", null_result_length);
        if (null_result_length == v.length) {
          return false;
        }
      } else if (!String(v)) {
        return false;
      }
      console.log("传递过来的答案", __TYPE__);
      /* 将questionList中的当前题目标识为已作答 */
      this.questionList = this.questionList.map((item, index) => {
        if (index == this.num_active) {
          return {
            ...item,
            is_answer: true
          };
        } else {
          return item;
        }
      });
      /* 考试 */
      if (["1", "2", "3"].includes(this.type)) {
        /* 将paperDetail->questions->questionGroupTestQuestionList中当前题目标识为已作答 */
        this.paperDetail = {
          ...this.paperDetail,
          questions: this.paperDetail.questions.map((item, index) => {
            if (item.questionGroupTestQuestionList) {
              let questionGroupTestQuestionList = item.questionGroupTestQuestionList.map(
                (item1, index1) => {
                  if (item1._index_ == this.num_active + 1) {
                    return {
                      ...item1,
                      is_answer: true
                    };
                  } else {
                    return item1;
                  }
                }
              );
              return {
                ...item,
                questionGroupTestQuestionList
              };
            } else {
              return item;
            }
          })
        };
      }
    },
    /* 获取考试记录详情 */
    async getTestReview() {
      this.SET_IS_LOADING(true);
      let params = {
        id: this.testRecordId
      };
      let result = await getTestReview(params);
      console.log("获取考试记录详情:", result);
      if (result && result.data && result.data.data) {
        const { data } = result.data;
        this.testRecord = data;
        this.testRecord.items.forEach((item, index) => {
          let trim_item = this.initAnswer(item.questionGroupTestQuestion);
          this.questionList = [
            ...this.questionList,
            {
              ...item,
              ...trim_item,
              recordQuestionId: item.id,
              user_answer: this.initAnswerItem(
                item.questionType,
                item.chosenAnswer
              ),
              // score: item1.score,
              user_score: item.score,
              is_show_answer: true,
              is_show_explain: true,
              is_answer: true,
              is_ban_input: true,
              is_review: true
            }
          ];
          // this.questionList = this.questionList.map((item1, index2) => {
          //   if (item.mqId == item1.id) {
          //     return {
          //       ...item1,
          //       ...item,
          //       ...trim_item,
          //       recordQuestionId: item.id,
          //       user_answer: this.initAnswerItem(
          //         item.questionType,
          //         item.chosenAnswer
          //       ),
          //       score: item1.score,
          //       user_score: item.score,
          //       is_show_answer: true,
          //       is_show_explain: true,
          //       is_answer: true,
          //       is_ban_input: true,
          //       is_review: true
          //     };
          //   } else {
          //     return item1;
          //   }
          // });
        });
      }
      this.SET_IS_LOADING(false);
    },
    /* 初始化页面 */
    initPage() {
      /* 考试 */
      if (["1", "2", "3"].includes(this.type)) {
        this.getQuestionBankPaperOne();
        /* 考试回顾获取考试记录 */
        if (this.review) {
          this.getTestReview();
        }
        /*练习 */
      } else if (["0"].includes(this.type)) {
        this.getQuestionsByChapter();
        this.chapterContinueTest();
        /* 错题随练 错题回顾*/
      } else if (["4"].includes(this.type)) {
        this.getQuestionBankOne();
        /* 错题回顾*/
        if (this.review) {
          this.getQuestionBankWrong();
          /* 错题随练*/
        } else {
          this.getRandomWrongQuestion();
        }
      }
    },
    /* 阻止F5刷新 */
    keydown(e) {
      var evt = window.event || e;
      var code = evt.keyCode || evt.which;
      console.log("code:", code);
      //组合事件
      if (
        code == 116 ||
        (evt.ctrlKey == true && code == 82) ||
        (evt.ctrlKey == true && code == 116) ||
        code == 114
      ) {
        if (evt.preventDefault) {
          evt.preventDefault();
        } else {
          evt.keyCode = 0;
          evt.returnValue = false;
          evt.cancelBubble = true;
          return false;
        }
      }

      //屏蔽Alt+F4
      if (evt.altKey && code == 115) {
        window.showModelessDialog(
          "about:blank",
          "",
          "dialogWidth:1px;dialogheight:1px"
        );
        evt.keyCode = 0;
        evt.returnValue = false;
        evt.cancelBubble = true;
        return false;
      }

      //屏蔽 Alt+ 方向键 ← ;屏蔽 Alt+ 方向键 → ！验证
      if (evt.altKey && (code == 37 || code == 39)) {
        console.log("网页路由");
        evt.keyCode = 0;
        evt.returnValue = false;
        evt.cancelBubble = true;
        return false;
      }
    },
    /* 阻止刷新 */
    reflesh(e) {
      var evt = window.event || e;
      let message = undefined;
      evt.returnValue = message;
      return message;
    },
    context(e) {
      return false;
    },
    /* 清除刷新事件 */
    removeReflesh() {
      console.log("清除刷新事件！");
      if (process.client) {
        document.addEventListener("keydown", this.keydown, false);
        document.addEventListener("contextmenu", this.context, false);
        window.addEventListener("beforeunload", this.reflesh, false);
      }
    },
    /* 恢复刷新事件 */
    destroyRemotion() {
      console.log("恢复事件！");
      if (process.client) {
        document.removeEventListener("keydown", this.keydown);
        document.removeEventListener("contextmenu", this.context);
        window.removeEventListener("beforeunload", this.reflesh);
      }
    },
    /* 导航条点击事件 */
    handleClickLeft() {
      this.is_half_out = true;
    }
  },
  created() {
    this.initPage();
  }
};
</script>
<style lang="scss">
.page-question-test-paper {
  .ivu-rate-star-full:before,
  .ivu-rate-star-half .ivu-rate-star-content:before {
    color: var(--theme-color);
  }
}
</style>
<style lang="scss" scope>
.fadeInLeft {
  transform-style: preserve-3d;
  transform-origin: left;
  animation: fadeInLeft 0.5s ease-in;
}
.fadeInRight {
  transform-style: preserve-3d;
  transform-origin: right;
  animation: fadeInRight 0.5s ease-in;
}
@keyframes fadeInLeft {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-100%);
  }
  51% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100%);
  }
  51% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.page-question-test-paper {
  width: 100%;
  min-height: 100vh;
  padding: 20px 0;
  background-color: #f5f6f7;

  .paper_msg_box {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1373;
    background-color: rgba(55, 55, 55, 0.6);
    .paper_dialog {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 600px;
      height: 400px;
      background: #ffffff;
      .paper_name {
        font-size: 20px;
        margin: 10px 0;
        text-align: center;
      }
      .paper_remind {
        display: flex;
        width: 100%;
        height: 230px;
        box-sizing: border-box;
        padding: 10px 20px;
        margin-bottom: 10px;
        .remind_left {
          width: 16%;
          font-size: 16px;
        }
        .remind_right {
          width: 84%;
          font-size: 16px;
          height: 230px;
          overflow: auto;
        }
      }
      .paper_time {
        display: flex;
        width: 100%;
        height: 50px;
        box-sizing: border-box;
        padding: 10px 20px;
        .remind_left {
          width: 16%;
          font-size: 16px;
        }
        .remind_right {
          width: 84%;
          font-size: 16px;
        }
      }
      .paper_btn_start {
        text-align: center;
      }
    }
  }
  .test-result-box {
    margin: auto;
    text-align: center;
    .rs-tt {
      color: #010101;
      font-size: 14px;
      font-family: SourceHanSansSC-regular;
      .tt-st {
        font-weight: bolder;
      }
    }
    .rs-tt {
      vertical-align: text-bottom;
      .rs-sc {
        color: var(--theme-color);
        font-size: 36px;
        text-align: center;
        font-family: SourceHanSansSC-bold;
      }
      .rs-lg {
        color: var(--theme-color);
      }
    }
    .rs-md {
    }
    .rs-tx {
      color: #010101;
      font-size: 14px;
      text-align: center;
      font-family: SourceHanSansSC-regular;
    }
  }
  .logout-modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1373;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    .logout {
      width: 444px;
      height: 226px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      background: #fff;
      box-shadow: 0px 3px 38px 0px rgba(58, 64, 74, 0.26);
      border-radius: 8px;
      .logout-title-modal {
        text-align: center;
        margin: 50px 0 20px 0;
        font-size: 18px;
        font-weight: bold;
        color: #5d6066;
      }
      .logout-tips {
        text-align: center;
        font-size: 14px;
      }
      .logout-btn {
        display: flex;
        justify-content: space-around;
        margin-top: 30px;
        .ivu-btn {
          width: 90px;
          height: 34px;
          text-align: center;
          background-color: var(--theme-color);
          color: rgb(255, 255, 255);
        }
      }
    }
  }
  .submit-modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1373;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    .submit {
      width: 444px;
      height: 226px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      background: #fff;
      box-shadow: 0px 3px 38px 0px rgba(58, 64, 74, 0.26);
      border-radius: 8px;
      .submit-title-modal {
        text-align: center;
        margin: 70px 0 20px 0;
        font-size: 18px;
        font-weight: bold;
        color: #5d6066;
      }
      .submit-img {
        position: absolute;
        left: 50%;
        top: -44px;
        width: 88px;
        height: 88px;
        transform: translateX(-50%);
        background-color: #ffffff;
        border-radius: 50%;
        box-shadow: 0px 3px 16px 0px rgba(58, 64, 74, 0.08);
        overflow: hidden;
        img {
          display: block;
          width: 100%;
          height: 100%;
          background-color: var(--theme-color);
        }
      }
      .submit-tips {
        text-align: center;
        font-size: 14px;
      }
      .submit-btn {
        display: flex;
        justify-content: space-around;
        margin-top: 30px;
        .ivu-btn {
          width: 90px;
          height: 34px;
          text-align: center;
          background-color: var(--theme-color);
          color: rgb(255, 255, 255);
        }
      }
    }
  }
  .pageposition {
    width: 1200px;
    // min-height: 800px;
    margin: 0px auto;
    background: #fff;
    .paper-name {
      line-height: 70px;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      padding: 0 50px;
      box-sizing: border-box;
      color: #5a5e66;
      border-bottom: 1px solid #e9edf5;
    }
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70px;
      padding: 0 50px;
      border-bottom: 1px solid #e9edf5;
      .head-left {
        .head-l-t {
          font-size: 18px;
          font-weight: bold;
          color: #5a5e66;
        }
        .head-tips {
          font-size: 14px;
          font-weight: bold;
          color: #ff9090;
          margin-left: 20px;
        }
      }
      .head-right {
      }
    }
    .question_container {
      width: 100%;
      min-height: 700px;
      display: flex;
      justify-content: space-between;
      .question_left {
        width: 280px;
        // border: 1px solid red;
        .count_down {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 30px;
          img {
            background-color: var(--theme-color);
            margin-right: 10px;
            width: 44px;
            height: 44px;
            display: block;
          }
        }
        .answer_card {
          padding: 30px 0;
          .answer_card_title {
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            color: #5a5e66;
            line-height: 24px;
            margin-bottom: 20px;
          }
          .answer_box {
            .answer_name {
              padding: 10px 10px;
              font-size: 16px;
              line-height: 22px;
              color: #4a4b4d;
              // background-color: #f7f8fa;
            }
            .answer_cantent {
              display: flex;
              padding: 10px;
              flex-wrap: wrap;

              .number_box {
                width: 40px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                background-color: #ebf2ff;
                color: var(--theme-color);
                border-radius: 4px;
                margin-right: 14px;
                margin-bottom: 14px;
                cursor: pointer;
                &.active {
                  background: var(--theme-color) !important;
                  color: #ffffff;
                }
                &.done {
                  color: #fff;
                  background-color: #5fd598;
                }
                &.wrong {
                  background-color: #f39090;
                  color: #fff;
                }
                &:nth-child(5n) {
                  margin-right: 0px;
                }
              }
            }
          }
        }
      }
      .question_right {
        width: 880px;
        // border: 1px solid red;
        padding-right: 20px;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
        .btn_list {
          position: absolute;
          right: 20px;
          top: 20px;
          z-index: 9;
          .btn {
            margin-left: 20px;
          }
        }
        .collection {
          position: absolute;
          left: 56px;
          top: 24px;
          width: 17px;
          height: 17px;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .analysis-container {
          width: 100%;
          .analysis-head-info {
            display: flex;
            width: 100%;
            justify-content: center;
            .head-left {
              width: 50%;
              .error-number {
                width: 40px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color: #ffffff;
                font-size: 24px;
                background-color: #f39090;
                border-radius: 50%;
                margin: 0px auto 20px;
              }
              .error-text {
                text-align: center;
                font-size: 20px;
                color: #4a4b4d;
                font-weight: bold;
              }
            }
            .head-right {
              width: 50%;
              .difficulty-number {
                width: 100%;
                height: 40px;
                margin: 0px auto 20px;
                display: flex;
                align-items: center;
                justify-content: center;
              }
              .difficulty-text {
                text-align: center;
                font-size: 20px;
                color: #4a4b4d;
                font-weight: bold;
              }
            }
          }
          .analysis-content-info {
            .analysis-video {
              .video-name {
                padding: 30px 30px 10px;
                font-size: 24px;
                font-weight: bold;
                color: #4a4b4d;
              }
            }
            .analysis-question {
              .analysis-text {
                padding: 30px;
                font-size: 16px;
                font-weight: bold;
                color: #4a4b4d;
                line-height: 24px;
                margin-bottom: 30px;
              }
            }
          }
        }
      }
    }
    .body-content {
      width: 100%;
      box-sizing: border-box;
      padding: 0 50px;
      .toppos {
        width: 100%;
        display: flex;
        height: 90px;

        .top-left {
          width: 20%;
          display: flex;
          align-items: center;
          img {
            background-color: var(--theme-color);
          }
          .time {
            font-size: 30px;
            font-weight: bold;
            color: #43474d;
          }
        }
        .mainpos {
          width: 20%;
          font-size: 30px;
          font-weight: bold;
          color: #43474d;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .top-right {
          width: 80%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;
          padding: 0 20px;
          .paper-name {
            font-size: 18px;
            font-weight: bold;
            color: #43474c;
          }
          .question-count {
            font-size: 18px;
            font-weight: bold;
            color: #43474c;
          }
        }
      }
      .questions {
        width: 100%;
        display: flex;
        height: 600px;
        .questions-left {
          width: 20%;
          .question-cart {
            width: 100%;
            text-align: center;
            line-height: 40px;
            font-size: 18px;
            font-weight: bold;
            color: #43474d;
          }
          .question-box {
            width: 100%;
            height: 560px;
            overflow: auto;
            &::-webkit-scrollbar {
              /*滚动条整体样式*/
              width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
              height: 1px;
            }
            &::-webkit-scrollbar-thumb {
              /*滚动条里面小方块*/
              border-radius: 10px;
              background-color: var(--theme-color);
              background-image: -webkit-linear-gradient(
                45deg,
                rgba(255, 255, 255, 0.2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0.2) 75%,
                transparent 75%,
                transparent
              );
            }
            &::-webkit-scrollbar-track {
              /*滚动条里面轨道*/
              box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
              background: #ededed;
              border-radius: 10px;
            }
            .question-list {
              margin: 10px 0;
              // display: flex;
              // justify-content: space-between;
              border-radius: 10px;
              overflow: hidden;
              .list-item {
                float: left;
                width: 50px;
                margin: 0 1px;
                height: 24px;
                text-align: center;
                line-height: 20px;
                cursor: pointer;
                border: 1px solid #ddd;
              }
              .num_active {
                background-color: var(--theme-color);
                border: 1px solid var(--theme-color);
                color: #fff;
              }
              .active-left {
                // border-radius: 10px 0px 0px 10px;
                border-bottom-left-radius: 10px;
                border-top-left-radius: 10px;
              }
              .active-right {
                // border-radius: 0px 10px 10px 0px;
                border-bottom-right-radius: 10px;
                border-top-right-radius: 10px;
              }
            }
          }
        }
        .questions-right {
          box-sizing: border-box;
          padding: 0 20px;
          width: 80%;
          .answer-box {
            margin: 12px 0;
            .ivu-radio-wrapper,
            .ivu-checkbox-wrapper {
              font-size: 14px;
              display: block;
            }
            .ivu-input {
              font-size: 14px;
            }
            .ivu-radio-wrapper + .ivu-radio-wrapper {
              margin-top: 12px;
            }
            .ivu-input-wrapper + .ivu-input-wrapper {
              margin-top: 12px;
            }
            .ivu-checkbox-wrapper + .ivu-checkbox-wrapper {
              margin-top: 12px;
            }
          }
          .question-btn {
            margin-bottom: 20px;
            text-align: right;
            .ivu-btn {
              background-color: var(--theme-color);
              color: rgb(255, 255, 255);
            }
          }
          .parsing {
            padding: 20px;
            border-top: 1px solid;
            height: 206px;
            width: 100%;
            .right_answer {
              .right-box {
                > p {
                  font-size: 14px;
                  color: #666;
                }
              }
              > p {
                font-size: 18px;
                color: #010101;
              }
              padding-bottom: 5px;
              font-family: SourceHanSansSC;
              font-weight: 700;
              font-size: 14px;
              color: #666;
              font-style: normal;
              letter-spacing: 0px;
              line-height: 27px;
              text-decoration: none;
            }
            .error_answer {
              padding-bottom: 5px;
              font-family: SourceHanSansSC;
              font-weight: 700;
              font-size: 18px;
              color: rgba(238, 65, 60, 1);
              font-style: normal;
              letter-spacing: 0px;
              line-height: 27px;
              text-decoration: none;
            }
            .error_parsing {
              padding-bottom: 5px;
              .e1 {
                width: 110px;
                font-family: SourceHanSansSC;
                font-weight: 700;
                font-size: 18px;
                color: rgb(16, 16, 16);
                font-style: normal;
                letter-spacing: 0px;
                line-height: 27px;
                text-decoration: none;
              }
              > p {
                font-family: SourceHanSansSC;
                font-weight: 400;
                font-size: 14px;
                color: #666;
                font-style: normal;
                letter-spacing: 0px;
                line-height: 24px;
                text-decoration: none;
              }
              .e-ctn {
                font-size: 14px;
                color: #666;
              }
            }
          }
        }
      }
    }
  }
}
</style>
